<template>
  <TopWG class="TopClassMain" :TopClassbg="TopClassbg" ></TopWG>
  <mean-button class="MeanClass"
               @meanClick="handleMean"
               :MenuBar="activeIndex===0?'rgba(255,255,255)':'rgba(24, 43, 98)'">
  </mean-button>


  <div class="swiper WeGao">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <WG1 :activeMainIndex="activeIndex" />
      </div>
      <div class="swiper-slide">
        <WG2 :activeMainIndex="activeIndex" />
      </div>
      <div class="swiper-slide">
        <WG3 :activeMainIndex="activeIndex"/>
      </div>
      <div class="swiper-slide">
        <WG4 :activeMainIndex="activeIndex"/>
      </div>
      <div class="swiper-slide">
        <WG5 :activeMainIndex="activeIndex" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <div :class="IsOpenPageList"></div>
</template>

<script setup>
import WG1 from '@/views/Mine/WeiGao/components/index.vue'
import WG2 from '@/views/Mine/WeiGao/components/index2.vue'
import WG3 from '@/views/Mine/WeiGao/components/index3.vue'
import WG4 from '@/views/Mine/WeiGao/components/index4.vue'
import WG5 from '@/views/Mine/WeiGao/components/index5.vue'
import TopWG from '@/views/Mine/WeiGao/components/Topindex.vue'
import MeanButton from '@/views/Mine/WeiGao/components/MeanButtonIndex.vue'
import {computed, onMounted, ref} from "vue";

defineOptions({name: "WeGao"})
const WGList = ref(['威高', '产品', '关于', '新闻',''])
// 当前swiper的页面索引
const activeIndex = ref(0)
const MeanOpen = ref(true)
// swiper圆点的颜色
const activeClass = ref('#00559b')
const TopClassbg = computed(() => {
  if (activeIndex.value === 0) {
    return "rgba(0,0,0,0)"
  } else {
    return "rgba(255,255,255)"
  }
})
// 是否增加遮罩样式
const IsOpenPageList = ref([])
onMounted(() => {
  const WeGaoSwiper = new Swiper('.WeGao', {
    direction: 'vertical', // 垂直切换选项
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    mousewheel: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      // 分页函数
      renderBullet(index, className) {
        if (activeIndex.value === index) {
          return `<span class="${className} even-bullet">${WGList.value[activeIndex.value]}</span>`;
        } else {
          return '<span class="' + className + '">' + "</span>";
        }
      },
    },
  });
  WeGaoSwiper.on('slideChange', () => {
    activeIndex.value = WeGaoSwiper.activeIndex
    // 判断索引-如果需要对应色调改变-的索引改变
    if (activeIndex.value === 1) {
      activeClass.value = 'white'
    } else {
      activeClass.value = '#00559b'
    }
    // 要先渲染后更新才行
    WeGaoSwiper.pagination.render();
    WeGaoSwiper.pagination.update();
  });
})

function handleMean() {
  const index = IsOpenPageList.value.indexOf("curtainClass1");
  if (index !== -1) {
    IsOpenPageList.value = ['curtainClass2']
  } else {
    IsOpenPageList.value = ['curtainClass1']
  }
}
</script>

<style scoped lang="scss">
.MeanClass {
  z-index: 3;
  position: fixed;
  right: 2rem;
  top: 3%;
}

.TopClassMain {
  position: fixed;
  width: 100%;
  z-index: 2;

  top: 0;
}



.curtainClass1 {
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100vw;
  height: 10vh;
  animation: lineAppear1 1s ease-in-out forwards;
  background-color: rgba(0, 85, 155);
}

@keyframes lineAppear1 {
  0% {
    height: 0;
    width: 100%;
  }
  100% {
    height: 100vh;
    width: 100%;
  }
}

.curtainClass2 {
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100vw;
  height: 10vh;
  background-color: rgba(0, 85, 155);
  animation: lineAppear2 1s ease-in-out forwards;
}

@keyframes lineAppear2 {
  0% {
    height: 100vh;
    width: 100%;
  }
  100% {
    height: 0;
    width: 100%;
  }
}

.swiper {
  width: 100%;
  height: 100%;
}

//圆点的样式
:deep(.swiper-pagination-bullet) {
  width: 10px;
  height: 10px;
  color: #000;
  opacity: 1;
  cursor: pointer;
  //因为写死了样式，如果这里不生生效，这里需要!important
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  --dynamic-color: v-bind(activeClass);
  background: var(--dynamic-color);
  //background: rgba(0, 0, 0, 0.2);
}

//对应的选中的参数
:deep(.swiper-pagination-bullet-active) {
  //本来不需要定高度的height,因为没有办法平均分配，所以只能通过包裹完全来自适应
  height: 30px;
  font-size: 12px;
  cursor: pointer;
  //color: #fff;
  background: rgba(0, 0, 0, 0);
  --dynamic-color: v-bind(activeClass);
  color: var(--dynamic-color);
}
</style>

